<template>
	<view>
		<view class="user-lv">
			<image class="term-img-logo" src="../../static/term/logo.png"></image>
			<view class="user-lv-tp">
				<view class="user-lv-img">
					<u-avatar size='140' :src="userinfo.headimg">
					</u-avatar>
				</view>
				<view class="user-lv-center" @getuserinfo="wxLogin" v-if="token">
					<view class="line1 " style="display: flex;font-size: 28rpx;align-items: center;">
						<view class="" style="font-size: 32rpx; font-weight: 550;">{{userinfo.likename||'(游客)'}}</view>
						<view class="u-flex-1 u-m-l-10 u-flex" v-if="userinfo.address">
							<view class="u-m-t-10">
								<u-icon size="30" name="/static/user/ding.png"></u-icon>
							</view>
							<view class="line1">{{userinfo.address||''}}</view>
						</view>
					</view>
					<view class="postName">
						{{postName||''}}
					</view>
					<view class="vipName">
						{{userinfo.characters}}
					</view>
				</view>
				<view v-else class="noneLogin" @click="$mHelper.to('/pagesB/login/login',true)">
					登录
				</view>
				<image v-if='token' @tap="edit" class="user-lv-bian" src="../../static/user/bian.png"></image>
			</view>
			<!-- 第二个 -->
			<view class="user-lv-bot">
				<view class="dis user-lv-bot-a">
					<view style="display: flex;align-items: center;">
						<image src="../../static/user/bi.png"></image>
						<label>学习币余额：{{userinfo.currency||'0'}}</label>
					</view>
					<view class="user-lv-bot-btn" @tap="balance" v-if="userinfo.yesNo">学习币充值</view>
				</view>
			</view>
			<!-- <view class="term-bei">
				<view class="term-yuan"></view>
			</view> -->
		</view>
		<!-- end -->
		<view class="user-list">
			<view class="user-to">
				<view class="user-toc" v-for="(item,index) in list" :key="index">
					<view class="user-list-a" @tap="toMuenList(item)">
						<image :src="item.img"></image>
						<view>{{item.name}}</view>
					</view>
				</view>
			</view>
			<view style="margin-top:60rpx;margin-bottom: 200rpx;">
				<view class="dis user-list-xia" v-for="(item,index) in data" :key="index" @tap="toMuenList(item)">
					<view>{{item.name}}</view>
					<image class="right-fu" src="../../static/user/right.png"></image>
				</view>
				<view class="dis user-list-xia" @click="xiu">
					<view>修改密码</view>
					<image class="right-fu" src="../../static/user/right.png"></image>
				</view>
				<view class="dis user-list-xia">
					<view>联系客服</view>
					<image class="right-fu" src="../../static/user/right.png"></image>
					<button type="default" open-type="contact"></button>
				</view>
				<!-- <view class="padding30rpx yp">
					<button class="kefu" type="text" open-type="contact" bindcontact="handleContact">联系客服</button>
					<image class="kefu_img" src="../../static/user/right.png"></image>
					<view class=" line " style="position: relative;padding-top: 80rpx; padding-bottom: ;">
					</view>
				</view> -->

				<button class="btn" @tap="quit" v-if="token">退出登录</button>
				<button class="btn" @click="$mHelper.to('/pagesB/login/login',true)" v-else>去登录</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {
					tit: 'LEON',
					name: '产品经理',
					yong: '普通用户' ///普通用户/企业用户/个人会员
				},
				list: [{
						name: '学习管家',
						img: require('../../static/user/1.png'),
						url: '/pagesA/steward/steward',
						type:true
					},
					{
						name: '订单中心',
						img: require('../../static/user/2.png'),
						url: '/pagesA/order/order',
						type:true
					},
					{
						name: '学习记录',
						img: require('../../static/user/3.png'),
						url: '/pagesA/record/record',
						type:true
					},
					{
						name: '考试中心',
						img: require('../../static/user/4.png'),
						url: '/pagesA/exam/exam',
						type:true
					},
					{
						name: '我的收藏',
						img: require('../../static/user/5.png'),
						url: '/pagesA/collect/collect'
					},
					{
						name: '打卡中心',
						img: require('../../static/user/6.png'),
						url: '/pagesA/card/card'
					},
					{
						name: 'VIP会员',
						img: require('../../static/user/7.png'),
						url: '/pagesA/member/member'
					},
					{
						name: '购买课程',
						img: require('../../static/user/8.png'),
						url: '/pagesA/course/course'
					}
				],
				data: [{
						name: '我的测评',
						url: '/pagesA/appraisal/appraisal',
						type:true
					},
					{
						name: '学习心得',
						url: '/pagesA/notes/notes'
					},
					{
						name: '企业私信',
						url: '/pagesA/private/private',
						type:true
					},
					{
						name: 'IBMG证书',
						url: '/pagesA/certificate/certificate',
						type:true
					},
					{
						name: '关于我们',
						url: '/pagesA/we/we'
					},
					{
						name: '用户协议',
						url: '/pagesA/protocol/protocol'
					},
					{
						name: '隐私协议',
						url: '/pagesA/privacy/privacy'
					},
					// {name:'联系客服',url:'/pagesA/service/service'}
				],
				SessionKey: '',
				OpenId: '',
				nickName: null,
				avatarUrl: null,
				isCanUse: uni.getStorageSync('isCanUse') || true, //默认为true

				pid: null,
				postName: ''
			}
		},
		computed: {
			userinfo() {
				return this.$store.state['userinfo']
			}
		},
		onShow() {
			this.$uniApi.tipMsg();
			this.getGwInfo() //查询用户当前岗位
		},
		methods: {
			//修改密码
			xiu() {
				uni.navigateTo({
					url: './wangji/wangji'
				})
			},
			selectUserMassges() {
				uni.request({
					method: 'GET',
					url: this.$api + '/app/UserController/selectUserMassges',
					header: {
						'token': uni.getStorageSync('token')
					},
					success: (res) => {
						console.log('查询用户信息', res.data)

						if (res.data.code == 200) {
							uni.setStorageSync('user', res.data.data)
							this.user = res.data.data
							uni.setStorageSync('qi', res.data.data.characters)
						}
					}
				})
			},
			getGwInfo() {
				this.$http.get('app/UserController/addUserPost').then(res => {
					if (res.code == 200) {
						this.pid = res.data.pid
						this.postName = res.data.pname
						uni.hideLoading();
						// if(res.data.examination==false){
						// 	this.$mHelper.schoolTest(res.data.pid)
						// }
						if (!res.data.pid) {
							this.$mHelper.toast('请选择岗位')
							setTimeout(function() {
								uni.navigateTo({
									url: './choice/choice'
								})
							}, 800);
						}
					} else {}
				})
			},
			//退出登录
			quit() {

				this.$store.commit('logout')
				this.$mHelper.to("/pagesB/login/login", true)
			},
			clilck(e) {
				this.$mHelper.to(e)
			},
			toMuenList(e){
				if(e.type==true){
					this.$mHelper.toast('敬请期待~')
					return;
				}
				this.$mHelper.to(e.url)
			},
			//编辑个人信息
			edit() {
				this.$mHelper.to("/pagesA/edit/edit")
				// this.$mHelper.to()
			},
			//学习币充值
			refill() {},
			//我的学习币
			balance() {
				this.$mHelper.to("/pagesA/balance/balance")

			},
			enter(e) {
				this.$mHelper.to(e)
			},
			//查询用户学习币
			// selectUserCurrency() {
			// 	uni.request({
			// 		method: 'GET',
			// 		url: this.$api + '/app/CurrencyController/selectUserCurrency',
			// 		header: {
			// 			'token': uni.getStorageSync('token')
			// 		},
			// 		success: (res) => {
			// 			console.log(res.data, '查询用户学习币')
			// 			this.user.currency = res.data.data.currency
			// 		},
			// 		fail(err) {
			// 			console.log(err)
			// 		}
			// 	})
			// },
		}
	}
</script>
<style>

</style>
<style scoped lang="scss">
	.term-img-logo {
		margin-top: 75rpx;
		margin-left: 4%;
		width: 129rpx;
		height: 70rpx;
	}
	.postName {
		color: #999;
	}

	.vipName {
		color: #999;
	}

	//
	.noneLogin {
		background: #00A29A;
		color: #FFFFFF;
		padding: 8rpx 20rpx;
		border-radius: 10rpx;

	}

	.yp {
		display: flex;
		flex-direction: column;
		padding-top: 15rpx;
	}


	.kefu_img {
		position: absolute;
		right: 33rpx;
		margin-top: 20rpx;
		width: 12rpx;
		height: 22rpx;
	}

	.kefu::after {
		border: none;
	}

	.btn {
		background: #00A29A;
		color: #FFFFFF;
		width: 92%;
		margin-top: 80rpx;
	}

	.term-bei {
		height: 50rpx;
		background-color: #00A29A;
		position: absolute;
		bottom: -24px;
		width: 50%;
		right: 0;
	}

	.term-yuan {
		padding: 25rpx;
		background-color: #ffffff;
		border-top-right-radius: 55rpx;
		position: absolute;
		bottom: 0;
		right: 0;
		width: 100%;

	}

	.user-list {

		.user-to {
			display: flex;
			flex-wrap: wrap;

			.user-toc {
				width: 25%;
				text-align: center;
			}
		}

		background: #FFFFFF;
		border-top-right-radius: 55rpx;
		z-index: 100;
		width: 100%;

		// position: absolute;
		// margin-top: -85rpx;
		// display: flex;
		.user-list-xia {
			width: 92%;
			margin-left: 4%;
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #DDDDDD;
			position: relative;
		}

		.user-list-xia>button {
			position: absolute;
			opacity: 0;
			width: 100%;
			height: 100%;
			border: 1rpx solid red;
		}

		.user-list-xia:last-child {
			border-bottom: 0;
		}

		.user-list-a {
			text-align: center;
			// display: flex;
			margin-top: 50rpx;

			image {
				width: 80rpx;
				height: 80rpx;

			}
		}
	}

	.user-lv {
		background-image: url(../../static/user/user_back.png);
		background-size: 100% 100%;
		height: 584rpx;
		width: 100%;
		position: relative;

		.user-lv-bot {
			width: 80%;
			margin-left: 10%;
			border-radius: 15rpx;
			padding: 10rpx 0;
			position: absolute;
			bottom: 65rpx;
			z-index: 10;

			.user-lv-bot-a {
				display: flex;
				align-items: center;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 15rpx;
				}

				label {
					// font-size: 32rpx;
					color: #00A29A;
					font-weight: bold;
				}
			}

			.user-lv-bot-btn {
				padding: 10rpx 20rpx;
				background-color: #00A29A;

				color: #FFFFFF;
				border-radius: 10rpx;
			}
		}


		.user-lv-tp {
			width: 92%;
			background-color: #FFFFFF;
			height: 228rpx;
			border-radius: 15rpx;
			margin-left: 4%;
			position: absolute;
			top: 160rpx;
			display: flex;
			align-items: center;
			padding: 0 30rpx;

		}

		.user-lv-img {
			width: 164rpx;
			border-radius: 50%;
		}

		.user-lv-bian {
			width: 32rpx;
			height: 32rpx;
			margin-top: -80rpx;
		}

		.user-lv-center {
			flex: 1;

			// border: 1rpx solid red;
			.user-lv-center-name {
				font-size: 40rpx;
				font-weight: bold;
				margin-bottom: 10rpx;

				label {
					color: #999999;
				}

				text {
					color: #00A29A;
				}
			}

			.user-lv-center-ding {
				width: 25rpx;
				height: 29rpx;
				font-size: 28rpx;
				margin-right: 10rpx;
			}
		}

	}
</style>
